<template>
  <view>
    <u-skeleton
      rows="1"
      :loading="loading"
      :title="false"
      rowsHeight="80rpx"
    >
      <u-row justify="space-around">
        <view
          class="center-view"
          v-for="(branch, index) in branchList"
          :key="branch.name + index"
          @click="click"
        >
          <u--image
            :showLoading="true"
            width="80rpx"
            height="80rpx"
            :src="branch.image"
            style="center-image"
          ></u--image>
          <u--text
            align="center"
            :text="branch.name"
          ></u--text>
        </view>
      </u-row>
    </u-skeleton>
  </view>
</template>

<script>
  import { isEmpty } from "lodash";

  export default {
    name: "BranchRow",
    props: {
      /**
       * 部门数据
       */
      branchList: {
        type: Array,
        default() {
          return [{ name: "", image: "" }];
        },
        required: true,
      },
    },
    data() {
      return {};
    },
    computed: {
      /**
       * 当branchList为空时，显示加载条
       */
      loading() {
        if (isEmpty(this.branchList) || isEmpty(this.branchList[0]?.name)) {
          return true;
        }
        return false;
      },
    },
    methods: {
      //	TODO 需要跳转部门，但现在没有数据
      click(item) {},
    },
  };
</script>

<style lang="scss" scoped>
  .center-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
